<template>
  <div class="app-container h-flex">
    <div class="app-container__left tree-box">
      <div class="type-title">应用</div>
      <ul class="type-list">
        <li
          v-for="(item, index) in apps"
          :key="index"
          :class="{ active: item.id === listQuery.appId }"
          @click="chooseApp(item)">
          {{ item.appName }}
        </li>
      </ul>
    </div>
    <div class="app-container__right h-flex-elastic v-flex overflow-hidden">
      <div class="filter-form__container">
        <el-form
          ref="form"
          class="query-condition"
          @submit.native.prevent>
          <el-form-item style="float:right;">
            <el-checkbox
              v-model="checkAll"
              @change="changeAll">全选</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="listQuery.clientId"
              class="filter-item"
              placeholder="所属服务"
              style="width: 200px;"
              @change="chooseClient">
              <el-option
                v-for="child in clients"
                :key="child.id"
                :label="child.dicKey"
                :value="child.id" />
            </el-select>
          </el-form-item>
          <el-button
            class="filter-form__button"
            style="margin-left:10px;"
            type="primary"
            size="mini"
            icon="el-icon-check"
            :loading="saving"
            @click="updateData">
            保存
          </el-button>
        </el-form>
      </div>
      <div ref="main" class="v-flex-elastic">
        <el-table
          v-if="height>0"
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          border
          :height="height"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50" />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="130"
            class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-checkbox
                v-model="row.checked"
                :true-label="row.id"
                :false-label="''"
                @change="auth(row)">授权</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="clientName"
            label="所属服务" />
          <el-table-column
            prop="name"
            label="接口名称" />
          <el-table-column
            prop="url"
            label="接口地址" />
          <el-table-column
            prop="httpMethod"
            label="请求方式" />
          <el-table-column
            prop="authorize"
            label="鉴权码" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getListAll } from '@/api/dsc/interface/api-resource'
import { getIds, updateData } from '@/api/dsc/interface/app-permission'
import { getListByTypeCode } from '@/api/dsc/system/dictionary/general'
import { getListAll as getApp } from '@/api/dsc/system/application'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscAppPermission',
  mixins: [tableMixin],
  data() {
    return {
      listQuery: {
        appId: ''
      },
      form: {
        appId: '',
        authIds: []
      },
      height: 0,
      listLoading: true,
      tableData: [],
      total: 0,
      apps: [],
      clients: [],
      saving: false,
      checkAll: false
    }
  },
  async created() {
    await this.getList()
    await this.getListPage()
    this.getIds()
  },
  methods: {
    async getList() {
      await getListByTypeCode({ typeCode: this.publicConfig['025'] }).then(response => {
        this.clients = response.data
        this.listQuery.clientId = this.clients.length ? this.clients[0].id : ''
      })
      await getApp().then(response => {
        this.apps = response.data
        this.listQuery.appId = this.form.appId = (this.apps && this.apps.length) ? this.apps[0].id : ''
      })
    },
    getListPage() {
      this.listLoading = true
      return getListAll({ clientId: this.listQuery.clientId }).then(response => {
        this.tableData = response.data
        this.listLoading = false
      }).catch(_ => {
        this.listLoading = false
      })
    },
    // 获取已授权的接口id
    getIds() {
      this.listLoading = true
      return getIds({ appId: this.listQuery.appId }).then(response => {
        this.form.authIds = response.data.length ? response.data[0].authIds : []
        this.tableData.forEach(item => {
          this.$set(item, 'checked', this.form.authIds.includes(item.id) ? item.id : '')
        })
        this.isCheckAll()
        this.listLoading = false
      }).catch(_ => {
        this.listLoading = false
      })
    },
    chooseApp(item) {
      this.listQuery.appId = this.form.appId = item.id
      this.getIds()
    },
    async chooseClient(val) {
      this.listQuery.clientId = val
      await this.getListPage()
      this.tableData.forEach(item => {
        this.$set(item, 'checked', this.form.authIds.includes(item.id) ? item.id : '')
      })
      this.isCheckAll()
    },
    changeAll(val) {
      this.tableData.forEach(item => {
        this.$set(item, 'checked', val ? item.id : '')
      })
      this.form.authIds = val ? this.tableData.map(item => item.id) : []
    },
    // 点击授权
    auth(row) {
      const id = row.id
      if (row.checked) {
        this.form.authIds.push(id)
      } else {
        this.form.authIds = this.form.authIds.filter(item => item !== id)
      }
      this.isCheckAll()
    },
    // 判断是否全选
    isCheckAll() {
      this.checkAll = !!this.tableData.length && !this.tableData.some(item => !item.checked)
    },
    updateData() {
      this.saving = true
      updateData(this.form).then(response => {
        this.notifiySuccess('保存成功!')
        this.saving = false
      }).catch(_ => {
        this.saving = false
      })
    }
  }
}
</script>
